<template>
    <div style="border: 1px solid red; background-color: rgb(175, 29, 129); padding: 40px; ">
        <!-- 添加顶部导航栏 -->
         <input type="text" v-model="searchValue" placeholder="请输入搜索内容" style="border: 1px solid black; width: 120px; height: 40px; border-radius: 10%; float: left; position: absolute; top: 20px; left: 100px;" >
         <button type="primary" size="small" style="float: left; position: absolute; left: 239px; top: 30px;">查询</button>
         <button @click="tologin" type="primary" size="small" style="float: right; background-color: aqua;">登录</button>
         <button style="margin-right: 10px; color: yellow; float: right; "@click="ht">后台入口</button>      
    </div>
    <div style="border: 1px solid black; margin-left: 90px; margin-top: 20px; width: 300px; height: 500px; display: inline-block;"> 

    </div>
    <div style="border: 1px solid black; margin-left: 90px; width: 700px; height: 500px; display: inline-block; position: relative;"> 
        <div style="display: flex; flex-wrap: wrap; gap: 20px; padding: 20px;">
            <div v-for="(product, index) in products" :key="index" style="flex: 1 1 calc(33.333% - 15px); box-sizing: border-box; text-align: center; border: 1px solid black;">
                <img :src="product.image" :alt="product.name" style="width: 100px; height: 100px;">
                <p>{{ product.name }}</p>
                <p>￥{{ product.price }}</p>
            </div>
        </div>
    </div>
      <div style="text-align: center; margin-top: 20px;">
      <button :disabled="currentPage === 1" @click="prevPage">上一页</button>
      <span style="margin: 0 10px;">第 {{ currentPage }} 页</span>
      <button :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
import { ref } from 'vue'
import axios from 'axios'
import { onMounted } from 'vue'
const products = ref([])

const currentPage = ref(1)
const pageSize = 6 

const paginatedProducts = computed(() => {
  const start = (currentPage.value - 1) * pageSize
  const end = start + pageSize
  return products.value.slice(start, end)
})

const totalPages = computed(() => Math.ceil(products.value.length / pageSize))

// 分页方法
function prevPage() {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

function nextPage() {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

function ht() {
  router.push('/')
}

function tologin() {
  router.push('/dl')
}

onMounted(() => {
  axios.post('http://localhost:8081/shop/sp/listImgMcJd').then((response) => {
    console.log(response.data)
    products.value = response.data
  })
})
</script>